<template>
  <a-card :bordered="false" style="height: 100%; overflow-y: auto;">
    <a-row><h3 style="font-weight:bold">订阅管理</h3></a-row>
    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :pagination="ipagination"
        :data-source="dataSource"
        :rowKey="(record,index)=>index"
        style="margin-top: 36px"
        @change="handleTableChange"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="TimeDeal" slot-scope="text, record">
          {{ timeFormat(record.createTime, 'yyyy/MM/dd hh:mm:ss') }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" :ghost="true" size="small" @click="check(record)" style="margin-right: 6px">
            查看
          </a-button>
        </span>
      </a-table>
    </a-spin>
    <a-drawer
      title="订阅详情"
      placement="right"
      :visible="showDetail"
      :width="840"
      @close="closeDetail"
    >
      <modelDetail :timeFormat="timeFormat" ref="detail"/>
    </a-drawer>
  </a-card>
</template>
<script>
import { mapState } from 'vuex'
import { axios } from '@/utils/request'
import modelDetail from './components/modelDetail.vue'

export default {
  name: 'StateMent',
  data () {
    return {
      queryParam: {
        serviceCode: '',
        serviceName: ''
      },
      showDetail: false,
      loading: false,
      exporting: false,
      state: 'add',
      exportType: 0,
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      nowTime: 156789,
      columns: [
        {
          title: '注册手机号',
          dataIndex: 'memberPhone',
          align: 'center'
        },
        {
          title: '服务代码',
          dataIndex: 'serviceCode',
          align: 'center'
        },
        {
          title: '服务名称',
          dataIndex: 'serviceName',
          align: 'center'
        },
        {
          title: '订阅状态',
          dataIndex: 'activeStatus',
          align: 'center',
          customRender: text => ['未开通', '开通中', '开通成功', '开通失败'][text]
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.orderManagement.queryParams
    })
  },
  components: {
    modelDetail
  },
  methods: {
    timeFormat (time, format) {
      const TIME = new Date(time)
      const DEL = data => (data < 10 ? '0' + data : data)
      const TMOBJ = {
        yyyy: TIME.getFullYear(),
        yy: TIME.getFullYear() % 100,
        MM: DEL(TIME.getMonth() + 1),
        M: TIME.getMonth() + 1,
        dd: DEL(TIME.getDate()),
        d: TIME.getDate(),
        hh: DEL(TIME.getHours()),
        h: TIME.getHours(),
        mm: DEL(TIME.getMinutes()),
        m: TIME.getMinutes(),
        ss: DEL(TIME.getSeconds()),
        s: TIME.getSeconds()
      }
      const reg1 = /(y+.)m+(.d+)/gi
      const reg2 = /(h+.)m+(.s+)/gi
      format = format.toLowerCase().replace(reg1, '$1MM$2').replace(reg2, '$1mm$2')
      for (const i in TMOBJ) {
        format = format.replace(i, TMOBJ[i])
      }
      return format
    },
    check (record) {
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs.detail.getDetail(record)
      })
    },
    searchReset () {
      this.$refs.queryForm.resetFields()
      this.loadData(1)
    },
    searchQuery () {
      console.log(this.queryParam)
      this.loadData(1)
    },
    filterObj (obj) {
      if (!(typeof obj === 'object')) {
        return
      }
      for (const key in obj) {
        if ((obj.hasOwnProperty(key) &&
          (obj[key] == null || obj[key] === undefined || obj[key] === '')) ||
          key.indexOf('selectedTime') > -1) {
          delete obj[key]
        }
      }
      return obj
    },
    getQueryParams () {
      var param = Object.assign({}, this.queryParam)
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return this.filterObj(param)
    },
    loadData (arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.loading = true
      var params = this.getQueryParams()
      this.rowSelected = []
      axios.get('/service-sale/member/order/list', { params: params }).then(data => {
        this.loading = false
        console.log(data)
        this.ipagination.total = data.totalCount
        this.dataSource = data.data
      })
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    },
    closeDetail () {
      this.showDetail = false
      this.$refs.detail.dataSource = []
    }
  },
  mounted () {
    this.loadData(1)
  }
}
</script>
<style lang="less" scoped>
</style>
